<template>
  <el-dialog title="" :visible.sync="dialogVisible" fullscreen :show-close="false">
    <div class="dialog-back" @click="dialogVisible=false">
      <i class="el-icon-arrow-left"></i>
      返回
    </div>
    <!-- 基础信息 -->
    <el-form ref="form" inline label-suffix=":"  onsubmit="return false">
      <el-row :gutter="20">
        <el-col :span="20">
        <el-form-item label="兑换码名称">
            {{ detailObj.name }}
          </el-form-item>
          <el-form-item label="桌面整理" label-width="150px">
            {{detailObj.pkg_name}}
          </el-form-item>
        </el-col>
        <el-col :span="4" class="tar">
          <el-button type="primary" size="medium" @click="onExport">导出</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 数据列表 -->
    <el-table :data="tableData" border style="width: 100%" >
      <el-table-column label="用户ID" prop="user_id" min-width="90px"></el-table-column>
      <el-table-column label="用户昵称" prop="nick_name" min-width="100px"></el-table-column>
      <el-table-column label="项目" min-width="100px">
        <template slot-scope="scope">
          {{scope.row.app_id|translateToName(permission_projectList,'app_id','name')}}
        </template>
      </el-table-column>
      <el-table-column label="领取版本号" prop="version" min-width="100px"></el-table-column>
      <el-table-column label="领取时间" min-width="180px">
        <template slot-scope="scope">
          {{scope.row.draw_time || '-'}}
        </template>
      </el-table-column>
      <el-table-column label="体验券时长" min-width="90px">
        <template slot-scope="scope">
          {{scope.row.total_minutes | timeFilter}}
        </template>
      </el-table-column>
    </el-table>
    <!--分页条-->
    <pagination :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.page_size" @pagination="getList" />
  </el-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
import { downloadExportUrl } from '@/utils'
import { experienceExchList, exportExperience } from '@/api/experience'
export default {
  name: 'ExchangeCodeDetail',
  props: {
    visible: Boolean,
    appidOptions: {
      type: Array,
      default: () => []
    },
    detailObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      total: 0,
      tableData: [],
      queryParams: {
        page: 1,
        page_size: 10
      }
    }
  },
  filters: {
    timeFilter (val) {
      if (val < 1440) {
        return val + '分钟'
      } else {
        return val / 24 / 60 + '天'
      }
    }
  },
  computed: {
    ...mapGetters('zcsd-core', ['permission_projectList']),
    dialogVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    dialogVisible (val) {
      if (val) {
        this.tableData = []
        this.total = 0
        this.queryParams.page = 1
        this.getList()
      }
    }
  },
  methods: {
    /**
     * 列表请求
     */
    getList () {
      var param = {
        page: this.queryParams.page,
        id: this.detailObj.id,
        page_size: this.queryParams.page_size
      }
      experienceExchList(param).then(res => {
        const data = res.data || {}
        this.tableData = data.list
        this.total = data.count
      })
    },
    /**
     * 导出
     */
    onExport () {
      var param = {
        id: this.detailObj.id
      }
      exportExperience(param).then(res => {
        downloadExportUrl(res.data.url)
      })
    }
  }

}
</script>
<style lang="scss" scoped>
.dialog-back{
  position: absolute;
  top: 20px;
  cursor: pointer;
  &:hover{
    color: #409EFF;
  }
}
.tar{
  text-align: right;
}
</style>
